<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>

<div class="container mt-5">
    <div class="row justify-content-sm-center">
        <div class="col-4">
            <div class="form-floating mb-3">
                <input type="email" class="form-control" id="email" placeholder="name@example.com">
                <label for="floatingInput">Email address</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="pwd" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>
        </div>
    </div>
    <div class="row justify-content-sm-center mt-3">
        <div class="col-4">
            <button type="button" class="btn btn-primary" id="submitbtn">提交</button>
        </div>
    </div>
</div>

<script>
    let submitbtn = document.querySelector("#submitbtn");

    let emailinput = document.querySelector("#email");
    let pwdinput = document.querySelector("#pwd");

    submitbtn.addEventListener('click', () => {
        if (!emailinput.value ||!pwd.value) {
            console.error("请填写邮箱和密码");
            return;
        }

        let data = {email: emailinput.value,pwd: pwdinput.value};

        fetch("/getHello",{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error("发生错误:", error);
            });
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
</html>